<!-- 区域块组件 -->
<template>
  <div class="pageMod" :class="{'padBottom': padBottom}">
    <el-divider content-position="left">
      <el-icon>
        <component :is="icon"></component>
      </el-icon>
      <span class="title">{{ title }}</span>
      <el-divider v-if="showBtn" direction="vertical" />
      <span v-if="showBtn" @click="show = !show" class="expand">{{ show ? '收缩' : '展开' }}</span>
    </el-divider>
    <el-collapse-transition>
      <div v-show="show">
        <slot></slot>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script setup>
  import {ref} from 'vue'

  const show = ref(true)

  // 定义父组件传入的值
  const props = defineProps({
    icon: {
      type: String,
      default: 'Filter'
    },
    title: {
      type: String,
      default: '筛查'
    },
    padBottom: {
      type: Boolean,
      default: true
    },
    showBtn: {
      type: Boolean,
      default: true
    }
  })
</script>

<style lang="less" scoped>
.pageMod{
  padding-bottom: 1px;
  :deep(.el-divider){
    .el-divider__text{
      display: flex;
      align-items: center;
      font-size: 18px !important;
      color: #303133 !important;
      .title{
        margin-left: 5px;
      }
      .expand{
        cursor: pointer;
        &:hover{
          color: #409EFF;
        }
      }
    }
  }
}
.pageMod.padBottom{
  :deep(.el-card) {
    .el-card__body {
      padding: 20px 20px 0;
    }
  }
}
</style>